<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>c</title>
    <style>
        h1 {
            color: red;
            /* rgb表示法(red,green,blue),每个位置取值范围[0,255]*/
            color: rgb(255, 0, 0);
            color: rgb(0, 255, 255);
            color: rgb(0, 255, 0);
            color: rgb(255, 0, 255);
            color: rgb(0, 0, 255);
            color: rgb(255, 255, 0);
            color: rgb(128, 128, 128);
            color: rgb(255, 255, 255);
            color: rgb(0, 0, 0);
            /*十六进制表示法(#rrggbb)，每个位置取值范围[00,ff]*/
            color: #ff0000;
            color: #00ff00;
            color: #0000ff;
            color: #ffffff;
            color: #000000;
            color: #808080;
            /*十六进制简写形式 #rgb，每个位置取值范围[0,f]*/
            color: #f00;
            color: #0f0;
            color: #00f;
            color: #fff;
            color: #000;
            color: #808080;
            /*rgba 表示法(red,green,blue,alpha)，alpha取值范围[0,1]，0表示完全透明，1表示完全不透明*/
            color: rgba(255, 0, 0, 1);
            color: rgba(255, 0, 0, .5);
            color: rgba(255, 0, 0, .3);
            color: rgba(255, 0, 0, .1);
        }

        .d1{
            /*注意：插入背景颜色必须设置所在区的大小*/
            width: 500px;
            height: 100px;
            /*插入背景图*/
            background-image: url("img/mr.png");
            background-size: 50px 100px;
            background-color: #000;
            ;

        }
        .d2{
            width: 1500px;
            height: 1300px;
            background-image: url("img/mr.png");
            background-repeat: no-repeat;
            border:  5px solid red;

            background-position: right,bottom;
        }
        .d3{
            width: 1950px;
            height: 950px;
            background-image: linear-gradient(317deg, red,orange,yellow,green,blue,purple);
        }



    </style>
</head>
<body>
<h1>测试颜色</h1>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>